<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue v-if 实例</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <p v-if="show">使用v-if 指令显示这段文本</p>
        <p v-else>这是 v-else 指定显示的内容</p>

        <button v-on:click="handleClose">点击隐藏</button>
        <!-- 表达式除了方法名还可以使用内联语句 -->
        <button v-on:click="show = true">点击显示</button>

        <p v-if="status === 1">当 status 为1时显示</p>
        <p v-else-if="status === 2">当 status 为2时显示</p>
        <p v-else>否则显示改行</p>
    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            show: true,
            status: 2
        },
        methods: {
            handleClose: function() {
                this.show = false;
            }
        }
    })
</script>

</html>